<?
require_once (__DIR__ . '/../../models/Accounts.php');
?>
	<div>
		<? if(IsLoggedIn()): ?>
		<?	$user=User(); ?>
		<? 		if(isset($_REQUEST['loggedin'])): ?>
		<div class="alert alert-success">
		    <button type="button" class="close">×</button>		
			Welcome back, <?="$user[firstName]"?>!
		</div>	
		<? 		endif; ?>
		<? else: ?>
		<span class="icon-user"></span> Log in <a href="<?=$rootUrl?>/../W/Accounts/login">here</a> to start shopping!
		<? endif; ?>
		
		<h2 class="ui">Products</h2>
		<div id="ui"></div>
	<? if (IsLoggedIn()): ?>	
		<h2 class="ui">My Cart</h2>
	<? endif; ?>	
		<div id="cart"></div>
		
	</div>
	<div id="details-box" class="modal hide fade">
	    <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		    <h3>Details</h3>
	    </div>
	    <div id="details-body" class="modal-body">
	    </div>
    </div>	
<script id="product_detail_hb" type="text/x-handlebars-template">
			<div class="item">
	  			<div class="img-circle img-wrapper">
	  				<img src="<?=$rootUrl?>/static/img/items/item_{{id}}_thumb.jpg" />	  			
	  			</div>
	  			<h5>Name: {{name}}</h5>
	  			<h6 class="caption">Short Description: {{shortDescription}}</h6>
	  			<h6>Long Description: {{longDescription}}</h6>
	  			<h6>Category: {{category}}</h6>
	  			<h6>SKU: {{sku}}</h6>
	  			<h6>In Stock: <span class="badge badge-important">{{numInStock}}</span></h6>
	  			<h5>Our Price: ${{price}}</h5>
	  			<? if (IsLoggedIn()): ?>
	  			<a class="add-to-cart-link" name="<?=$rootUrl?>/../A/Cart/{{id}}" href="">
	  				<img src="<?=$rootUrl?>/static/img/btn_add_to_cart.png" />
	  			</a>
	  			<? endif; ?>
	  		</div>  
</script>		 
   
<script type="text/javascript" src="<?=$rootUrl?>/static/js/bootstrap.js"></script>
<script id="cart_hb" type="text/x-handlebars-template">
  <ul class="unstyled cart">
  {{#each items}}
  	{{> t_cart_item}}
  {{/each}}	  	
  </ul>
</script>
<script id="cart_item_partial_hb" type="text/x-handlebars-template">
  <li id="cart_item_{{id}}">
  	<img src="<?=$rootUrl?>/static/img/items/item_{{id}}_thumb.jpg"/>
    {{name}}
  	Quantity: <input type="number" class="quantity-field" name="{{id}}" value="{{count}}" />
  	<a class="remove-from-cart-link" title="remove item from cart" name="<?=$rootUrl?>/../A/Cart/{{id}}" href="">
		<img src="<?=$rootUrl?>/static/img/btn_remove.png" />
	</a>
  </li>
</script>
<script id="products_hb" type="text/x-handlebars-template">
  {{#each aaData}}
  	<div class="item">
  		<div class="img-circle img-wrapper">
  			<img src="<?=$rootUrl?>/static/img/items/item_{{id}}_thumb.jpg" />	  			
  		</div>
  		<h5>{{name}}</h5>
  		<h6 class="caption">{{shortDescription}}</h6>
  		<h6><a class="details-link" name="<?=$rootUrl?>/../A/Products/{{id}}" href="">Details</a></h6>
  		<h6>In Stock: <span class="badge badge-important">{{numInStock}}</span></h6>
  		<h5>Our Price: ${{price}}</h5>
  		<? if (IsLoggedIn()): ?>
  		<a class="add-to-cart-link" name="<?=$rootUrl?>/../A/Cart/{{id}}" href="">
  			<img src="<?=$rootUrl?>/static/img/btn_add_to_cart.png" />
  		</a>
  		<? endif; ?>
  	</div> 
  {{/each}}
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
</script>
<script type="text/javascript">
	var user = null;
	$(function(){
		
		// check if logged in first
	  	$.get('<?=$rootUrl?>/../A/Accounts?isloggedin',function (data){ 
  			user=data; // set user variable for later use 
  			// route to the correct display function
  			if (data.isloggedin)
  				showLoggedInStuff(); 
  			else
  				showNotLoggedInStuff();	
  		},'json');
      
  	});
  	var showLoggedInStuff = function(){
		
  		showCommonStuff();			
		displayCart();

  	} // end of showLoggedInStuff
  	// handlebars variables
  	var t_cart;
  	var t_cart_item;
  	var t_products;
  	var t_products_detail;
  	var displayCart = function () {
  		$(".cart").show();
  			/* display cart */
		$.get('<?=$rootUrl?>/../A/Cart', function(data){		
			 	
			 	if (data.status == 'success'){	
			    	var values = $.map( data.cart, function( value, index ) {
			    	  return value;
			    	});
			     
					$("#cart").html(t_cart({items: values}));	
				}	
				else if (data.status == 'failure' && data.reason == 'empty'){
					$("#cart").html("");
			 		$("#cart").html("<h5 id=\"cart_empty\">Your cart is empty</h5>");	
			 	}	
			 	else;
		},'json');
	}
  	var showNotLoggedInStuff = function() {
  		showCommonStuff();
  		$(".cart").hide();
  	} // end of showNotLoggedInStuff
  	var showCommonStuff = function() {
  		t_cart = Handlebars.compile($("#cart_hb").html());
		t_cart_item = Handlebars.compile($("#cart_item_partial_hb").html());
		Handlebars.registerPartial('t_cart_item', t_cart_item);
		t_products = Handlebars.compile($("#products_hb").html());
		t_product_detail = Handlebars.compile($("#product_detail_hb").html());
		/* display products */		
		$.get('<?=$rootUrl?>/../A/Products', function(data){
			$("#ui").html(t_products(data));
		},'json');
		/* close alerts on click */
		$(".close").live('click',function(){
			$(this).closest(".alert").slideUp();
		});	
		
		/* load details of a product */
		$(".details-link").live('click',function(){
			$("#details-box").modal({'show':true });
			$.get(this.name, function(data){
				$("#details-box").find(".modal-body").html(t_product_detail(data));
			},'json');
			return false;
  		});
		
		/* add to cart button */
		$(".add-to-cart-link").live('click',function(){
			$.post(this.name, {_method: 'POST', count: 1}, function(data){
				if (data.status == 'success'){	
					// get rid of cart_empty text 
					if ($("#cart_empty").length)
						$("#cart_empty").remove();
					// check if should bump count of existing item or add new item	
					if($("#cart_item_" + data.item.id).length > 0)
							$("#cart_item_" + data.item.id).replaceWith(t_cart_item(data.item));
					else
							$("div#cart").append(t_cart_item(data.item));
				}
			},'json');
			return false;
		});
		
		/* remove from cart button */
		$(".remove-from-cart-link").live('click',function(){
			$.post(this.name, {_method: 'POST', _request: 'remove'}, function(data){
				displayCart();     
			},'json');
			return false;
		});
		/* edit cart item count */
		$(".quantity-field").live('change',function(){
			if (this.value > 0)
			{
				$(".quantity-field").removeClass("error");
				$(".quantity-field-error").remove();
				$.post("<?=$rootUrl?>/../A/Cart/" + this.name, {_method: 'POST', _request: 'edit', count: this.value}
					,function(data){ return false; //nothing to do 
						}
					,'json');
		 	}
		 	else // invalid value 
		 	{
		 		$(".quantity-field").addClass("error").after("<span class=\"error quantity-field-error\">" + this.value +" is an invalid value</span>");
		 	}
			return false;
		});
		/* validate quantity */
  	}// end of showCommonStuff
</script>